<template>
    <div class="box">
        <h2>custom event</h2>
        <br>
        <button @click="btnClickHandler">按钮</button>

        <button @xxx="btnXxxHandler">按钮</button>

        <Event1 @click="Event1ClickHandler"></Event1>

        <Event1 @xxx="Event1xxxHandler"></Event1>

        <!-- click变成原生事件 -->
        <Event1 @click.native="Event1ClickHandler"></Event1>
        <br>
        <br>
        <br>
        <br>
        <h2>参数</h2>
        <!-- 原生元素 -->
        <button @click="btnClick">按钮1</button>
        <button @click="btnClick(11)">按钮2</button>
        <button @click="btnClick($event, 11)">按钮3</button>
        <!-- 组件自定义事件 -->
        <Event1 @xxx="xxxHandler"></Event1>
        <Event1 @xxx="xxxHandler(33)"></Event1>
        <Event1 @xxx="xxxHandler($event, 33)"></Event1>
    </div>
</template>

<script>
// 自定义事件组件父子之间的通信方式
// -----------------------------------------
// 事件:可以给元素绑定、也可以给组件绑定
// 在vue中使用 v-on:click="" 绑定事件,简写 @click=""
// 1. 给元素绑定事件
//      绑定的click事件
//          1.1 事件类型,是click,当给元素绑定事件的时候,绑定的click是系统事件,系统事件是系统内置好的,个数有限个
//          1.2 触发机制,当我们点击这个按钮的时候,自动触发,浏览器给我们触发了当前事件
//      绑定自定义事件xxx
//          1.3 给元素绑定自定义事件,没有触发机制,无法触发事件,没有意义
// 2. 给组件绑定事件
//      绑定的click事件
//          2.1 事件类型,是click,这里组件上绑定的事件被理解成了自定义事件
//          2.2 触发机制,需要我们自己手动的在组件内部使用$emit()对绑定的事件进行触发
//      绑定自定义事件xxx
//          2.3 事件类型,是xxx,这里组件上绑定的就是自定义事件
//          2.4 触发机制,需要我们自己手动的在组件内部使用$emit()对绑定的事件进行触发
//      注意:
//          给组件绑定的click事件被理解成了自定义事件,如何让这个自定义事件变成原生事件呢?
//          解决方案:
//              给组件的click事件添加修饰符号 .native, 此时给组件绑定的click事件就变成了原生事件了
//              这个事件将被绑定到子组员的根节点上
// ---------------------------------------------------
// 关于参数
// 1. 元素绑定事件
//  <button @click="btnClick">按钮1</button>
//      当不传参的时候,默认参数是 事件对象 event
//  <button @click="btnClick(11)">按钮2</button>
//      当传参的时候,回调中第一个参数是传递的数据
//  <button @click="btnClick($event, 11)">按钮3</button>
//      当传参的时候,即想要事件对象,又想要自己的参数,需要使用$event占位
//          注意: 必须使用$event,问:为什么?
// 2.组件绑定事件
//  <Event1 @xxx="xxxHandler"></Event1>
//      触发xxx事件的时候,接收到的参数是$emit('xxx', 22)的第二个参数,是22
//  <Event1 @xxx="xxxHandler(33)"></Event1>
//      触发xxx事件的时候,接收到的参数是小括号中的33
//  <Event1 @xxx="xxxHandler($event, 33)"></Event1>
//      触发xxx事件的时候,$event是子组件 $emit('xxx', 22) 中的22, 33 是我们自己的参数
import Event1 from './Event1'
export default {
    name: "EventTest",
    components: { Event1 },
    methods: {
        btnClickHandler() {
            console.log('触发了按钮click事件')
        },
        Event1ClickHandler() {
            console.log('触发了Event1的click事件')
        },
        btnXxxHandler() {
            console.log('触发了按钮xxx事件')
        },
        Event1xxxHandler() {
            console.log('触发了Event1的xxx事件')
        },
        // -------
        btnClick(e, arg) {
            console.log(e, arg)
        },
        xxxHandler(e, arg) {
            console.log(e, arg);
        }
    }
}
</script>

<style scoped>

</style>